<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.bg{
				height: 1000px;
				width: 100%;
				background: linear-gradient(top,rgba(255,0,0,0),rgba(255,0,0,1));
				background: -webkit-linear-gradient(top,rgba(255,0,0,0),rgba(255,0,0,1));
				background: -moz-linear-gradient(top,rgba(255,0,0,0),rgba(255,0,0,1));
				border: 3px solid -moz-linear-gradient(top,rgba(0,0,255,0),rgba(0,0,255,1));
			}
		</style>
	</head>
	<body>
		<div class='bg'></div>
	</body>
	<script>


    // function scrollExtend(obj){
    //     var handler=null;
    //     var start=obj.scrollStart;
    //     var scroll=obj.scrollIng;
    //     var end=obj.scrollEnd;
    //     var delay=obj.delay||200;

    //     return function(){
    //         var that = this;
    //         var _argumrnts = arguments;
    //         if(!handler&&start) start.apply(this, arguments);
    //         if(handler) clearTimeout(handler);
    //         if(scroll) scroll.apply(this, arguments);
    //         if(end){
    //             handler = setTimeout(function() {
    //             handler=null;
    //             end.apply(that, _argumrnts);
    //             }, delay);
    //         }
    //     };
    // }

    function scrollExtend(options){
        let handler=null;
        let {
            scrollStart,
            scrollIng,
            scrollEnd,
            delay = 200
        } = options

        return function(){
            let _arguments = arguments
            if(!handler&&scrollStart) scrollStart.apply(this, _arguments)
            if(handler) clearTimeout(handler)
            if(scrollIng) scrollIng.apply(this, _arguments)
            if(scrollEnd){
                handler = setTimeout(()=>{
                    handler = null
                    scrollEnd.apply(this, _arguments)
                },delay)
            }
        };
    }


		var x=0;
		var time=new Date().getTime();

		window.addEventListener('scroll',scrollExtend({
			scrollStart:function(e){
				console.log("start", this, e);
			},
			scrollIng:function(e){
				console.log("ing", this, e);
			},
			scrollEnd:function(e){
				console.log("end", this, e);
			},
			delay:300
		}));
	</script>
</html>
